<!-- 图片板块 -->
{% extends "base.html" %}
{% block title %}图片专区{% endblock %}
{% block content %}
    <br>
    <div class="row" style='margin-left:100px;margin-top: -25px'>
    {% for post in posts %}
        <div class="col-md-4" style="width: 28%">
            <div class="panel photocard panel-danger" style="margin-top:50px;">
                <div class="panel-heading" style="text-align: center">
                    {{ post.title }}
                </div>
                 <div class="panel-body" style="width: 100%;height: 250px">
                     <a href="/photo/{{ post.id }}"><img src="{{ post.picture }}" style="width: 100%;height: 100%"></a>
                 </div>
                <div class="panel-footer" style="background-color:{% cycle "orange" "LightSkyBlue" "Magenta" "MediumTurquoise" "MediumSlateBlue" "Orangered" %};height: 40px;width: 100.6%;margin-left: -1px">
                    <p style="color: white;">发布时间: {{ post.pub_date | date:'Y年m月d日, H:i'}}</p>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
    <div style="text-align: center;margin-top: 20px">
        <nav>
            <ul class="pagination">
                {% if posts.has_previous %}
                <li>
                    <a href="?page={{ posts.previous_page_number }}">
                        <span>&laquo;</span>
                    </a>
                </li>
                {% else %}
                <li class="disabled">
                    <a>
                        <span>&laquo;</span>
                    </a>
                </li>
                {% endif %}
                {% for number in posts.paginator.page_range %}
                    {% if posts.number == number %}
                        <li class="active"><a href="?page={{ number }}">{{ number }}</a> </li>
                    {% else %}
                        <li><a href="?page={{ number }}">{{ number }}</a> </li>
                    {% endif %}
                {% endfor %}
                {% if posts.has_next %}
                    <li>
                        <a href="?page={{ posts.next_page_number }}">
                            <span>&raquo;</span>
                        </a>
                    </li>
                {% else %}
                    <li class="disabled">
                        <a>
                            <span>&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
{% endblock %}